<template>
  <div class="flex1 flexC" style="overflow: hidden">
    <div class="znfx_top flex JustifyContentC AlignItemsC">
      <div class="flexC font_s16 JustifyContentC AlignItemsC flex1">
        <p class="flex JustifyContentC AlignItemsC">
          <img src="@/assets/img/zhjg/icon_yujing.png" class="znfx_top_img"/>
          <span class="num_impact font_s36">{{num}}</span>
          次
        </p>
        <p style="color: #7FDDE1">最新未完成预警数</p>
      </div>
      <img src="@/assets/img/zhjg/line_bg.png" alt="" style="width: .8125rem; height: 90%"/>
      <div class="flexC font_s16 JustifyContentC AlignItemsC flex1">
        <p class="flex JustifyContentC AlignItemsC">
          <img src="@/assets/img/zhjg/js_icon.png" class="znfx_top_img"/>
          <span class="num_impact font_s36">{{num2}}</span>
          次
        </p>
        <p style="color: #7FDDE1">历史累计预警次数</p>
      </div>
    </div>
    <div class="znfx_box">
      <ul class="znfx_ul flex1">
        <li class="flexC font_s16 JustifyContentC AlignItemsC"
            v-for="(item, index) in dataList"
            :key="index"
            @click="swithMap(item)">
          <p style="white-space: pre-wrap;" class="AlignItemsC">{{item.expectWarnName}}</p>
          <p><span class="num_impact font_s28">{{item.num}}</span>次</p>
        </li>
      </ul>
    </div>
    <modal-list v-if="klyModal"
                :title=orgTitle
                @hidden="hidden(klyModal)">
      <kly-modal :dataList=klyList
                 :tabletitle=klyTitleList />
    </modal-list>
  </div>
</template>

<script>
  import { gdmapOther } from '../../assets/gdmap'
  import { queryWarnOrgListByWarnType, queryBzfwKlyWarnList } from '@/api/home'
  import ModalList from "../../components/ModalList";
  import KlyModal from "./modal/KlyModal";
  export default {
    name: "ZnfxItem",
    components: {KlyModal, ModalList},
    props: {
      dataList: {
        type: Array,
        default: () => {
          return []
        }
      },
      num: {
        type: Number,
        default: () => {
          return 0
        }
      },
      num2: {
        type: Number,
        default: () => {
          return 0
        }
      }
    },
    filters: {
      StringFun(val) {
        var Str = ''
        if (val.length > 6) {
          Str = val.substring(0, 6) + ' <br/> ' + val.substring(6 + 1)
        } else {
          Str = val
        }
        return Str
      }
    },
    data () {
      return {
        mapList: [],
        warnType: '',
        klyModal: false,
        klyTitleList: [],
        klyList: [],
        orgTitle: ''
      }
    },
    methods: {
      swithMap (item) {
        if (item.expectWarnName === '客流眼预警') {
          this.klyTitleList = ['序号', '公墓名称', '月预警总次数', '预警总次数']
          this.orgTitle = '客流眼预警'
          this.klyFun()
        } else {
          this.warnType = item.expectWarnType
          this.$root.MapGd = null
          window.gmap.clearMap()
          this.getMap ()
        }
      },
      getMap () {
        queryWarnOrgListByWarnType({
          warnType:  this.warnType
        }).then((response) => {
          if (response) {
            this.mapList = response.data.response
            gdmapOther(window.gmap, this.mapList, 8, 8)
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      klyFun() {
        queryBzfwKlyWarnList().then((response) => {
          if (response.data.response) {
            this.klyModal = true
            this.klyList= response.data.response
          }
        }).catch((response) => {
          console.log(response)
        })
      },
      hidden(choose) {
        if (choose === this.klyModal) {
          this.klyModal = false
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .num_impact{
    font-family: Impact;
    font-weight: 400;
    color: #75FBFE;
    margin-right: .2rem;
  }
  .znfx_top {
    height: 20%;
    color: #D6FDFF;
  .znfx_top_img {
    width: 3.6875rem;
    height: 3.6875rem;
  }
  }
  .znfx_box {
    height: 80%;
    overflow: hidden;
  }
  .znfx_ul {
    height: 100%;
    overflow-y: auto;
    padding: 0 1rem;
  }
  .znfx_ul li {
    width: 49%;
    height: 24%;
    margin-bottom: 1%;
    margin-right: 1%;
    background: url("~@/assets/img/zhjg/faxian_bg.png") no-repeat;
    background-size: 100% 100%;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #CEF9FC;
    float: left;
    padding: 0 1rem;
    box-sizing: border-box;
    text-align: center;
  }
</style>